<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Job Mgr</title>
    <link rel="stylesheet" type="text/css" href="http://www.ajaxjs.com/public/common.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.ajaxjs.com/public/admin.css"/>
    <script src="http://www.ajaxjs.com/public/common.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <style>
        .btns a{
            display: inline-block;
            background-color:#008ef0;
            border-radius: 5px;
            color: white;
            padding: 3px 8px;
            height:21px;
            line-height:20px;
            margin-right: 10px;
            font-size:12px;
        }
    </style>
</head>
<body class="inner-page">
<h2>任务调度管理</h2>
<br/>
<br/>
<div id="vue">
    <table class="list-table">
        <thead>
        <tr>
            <th>id</th>
            <th>任务名称</th>
            <th>执行类</th>
            <th>执行方法</th>
            <th>表达式</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tr v-for="(item) in mapList">
            <td>{{item.id}}</td>
            <td>
                <span v-show="editingId != item.id">{{item.name}}</span>
                <input type="text" v-show="editingId == item.id" v-model="item.name"/>
            </td>
            <td>
                <span v-show="editingId != item.id">{{item.className}}</span>
                <input type="text" v-show="editingId == item.id" v-model="item.className"/>
            </td>
            <td>{{item.method}}()</td>
            <td>
                <span v-show="editingId != item.id">{{item.express}}</span>
                <input type="text" v-show="editingId == item.id" v-model="item.express"/>
            </td>
            <td>{{{0:'进行中',1:'已暂停',2:'已删除'}[item.status]}}</td>
            <td>{{item.createDate}}</td>
            <td class="btns">
                <a href="#" @click="trigger(item.id)" title="执行一次任务">▶ 执行</a>
                <a href="#" @click="del(item.id)">✖ 删除</a>
                <a href="#" @click="pause(item.id)" v-if="item.status == 0">❚❚ 暂停</a>
                <a href="#" @click="resume(item.id)" v-if="item.status != 0">⟳ 恢复</a>
            </td>
        </tr>
    </table>
</div>

<script>
new Vue({
    el: '#vue',
    data: {
        mapList: [],
        create: {},
        isShowCreate: false,
        editingId: 0
    },
    mounted() {
        aj.xhr.get('http://localhost:8301/scheduled', json => {
            this.mapList = json.data.rows;
        });
    },
    methods: {
      trigger(id) {
        aj.xhr.postForm('http://localhost:8301/scheduled/trigger/' + id, null, (json) => {
                if (json && json.status == 1) {
                    alert('执行成功');
                    location.reload();
                }
            });
        },
        del(id) {
            if (confirm('确定删除？')) {
                let url = "http://localhost:8301/scheduled/remove/" + id;
                aj.xhr.postForm(url, {}, (json) => {
                    if (json && json.status == 1) {
                        alert('删除成功');
                        location.reload();
                    }
                });
            }
        },
        pause(id) {
            aj.xhr.postForm('http://localhost:8301/scheduled/pause/' + id, {}, (json) => {
                if (json && json.status == 1) {
                    alert('暂停成功');
                    location.reload();
                }
            });
        },
        resume(id) {
            aj.xhr.postForm('http://localhost:8301/scheduled/resume/' + id, {}, (json) => {
                if (json && json.status == 1) {
                    alert('恢复成功');
                    location.reload();
                }
            });
        }
    }
});
</script>
</body>
</html>